<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>别捅马蜂窝</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        margin: 0;
        height: 100vh;
        background-color: #f5fccd;
        overflow: hidden;
        cursor: none;
      }

      .hive-line {
        position: absolute;
        width: 0.2rem;
        height: 3rem;
        background-color: #12486b;
        box-shadow: 2rem -0.5rem 1rem 0 rgba(0, 0, 56, 0.5);
      }
      .hive-line--provoked {
        transform-origin: 50% -2rem;
        animation: swing;
        animation-duration: 1s;
        animation-iteration-count: 2;
      }
      @keyframes swing {
        0%,
        100% {
          transform: rotate(0deg);
        }
        33.33% {
          transform: rotate(-10deg);
        }
        66.66% {
          transform: rotate(10deg);
        }
      }

      .hive-text {
        position: absolute;
        top: 1rem;
        left: calc(50vw - 8rem);
        width: 5rem;
        font-family: 'Archivo Black', sans-serif;
        color: #12486b;
      }
      .hive-text:before {
        content: '';
        position: absolute;
        bottom: -2rem;
        left: 3rem;
        width: 0.2rem;
        height: 2rem;
        background-color: #12486b;
        transform: rotate(-45deg);
      }

      .hive {
        position: relative;
        width: 8rem;
        height: 10rem;
        margin-top: 3rem;
        border-radius: 50%;
        background: radial-gradient(circle at 0 0, #fff -20%, orange);
        overflow: hidden;
        box-shadow: 2rem 1rem 2rem 0 rgba(0, 0, 56, 0.5);
      }
      .hive--provoked {
        transform-origin: 50% -4rem;
        animation: swing;
        animation-duration: 1s;
        animation-iteration-count: 2;
      }
      @keyframes swing {
        0%,
        100% {
          transform: rotate(0deg);
        }
        33.33% {
          transform: rotate(-10deg);
        }
        66.66% {
          transform: rotate(10deg);
        }
      }
      .hive__division {
        position: absolute;
        width: 100%;
        height: 0.2rem;
        background: linear-gradient(90deg, #ff7d66, #000038 300%);
      }
      .hive__division:nth-child(1) {
        top: 10%;
      }
      .hive__division:nth-child(2) {
        top: 30%;
      }
      .hive__division:nth-child(3) {
        top: 50%;
      }
      .hive__division:nth-child(4) {
        top: 70%;
      }
      .hive__division:nth-child(5) {
        top: 90%;
      }
      .hive__door {
        position: absolute;
        left: 2.5rem;
        bottom: 2rem;
        width: 3rem;
        height: 3rem;
        border-top: 0.3rem solid #ff7d66;
        border-radius: 50%;
        background: linear-gradient(#12486b -100%, #000038);
      }

      .bee {
        position: absolute;
        top: 9rem;
        left: calc(50vw - 0.4rem);
        width: 0.8rem;
        height: 0.5rem;
        border-radius: 50%;
        background: linear-gradient(
          90deg,
          orange,
          orange 20%,
          #000038 20%,
          #000038 40%,
          orange 40%,
          orange 60%,
          #000038 60%,
          #000038 80%,
          orange 80%
        );
        box-shadow: 2rem 1rem 1rem 0 rgba(0, 0, 56, 0.6);
        transition-property: top, left;
        transition-duration: 0.5s;
        animation: flying;
        animation-duration: 10s;
        animation-iteration-count: infinite;
      }
      .bee:before,
      .bee:after {
        content: '';
        position: absolute;
        top: -0.3rem;
        width: 0.3rem;
        height: 0.3rem;
        background: rgba(255, 255, 255, 0.6);
      }
      .bee:before {
        left: 0;
        border-radius: 0 0.2rem 0 0.2rem;
      }
      .bee:after {
        left: 0.3rem;
        border-radius: 0.2rem 0 0.2rem 0;
      }
      @keyframes flying {
        0% {
          top: 9rem;
          left: calc(50vw - 0.4rem);
          opacity: 0;
        }
        5% {
          opacity: 1;
        }
        10%,
        70% {
          top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
          left: calc(var(--left) + 1rem);
        }
        15%,
        75% {
          top: min(calc(var(--top) + 3rem), calc(80vh - 1rem));
          left: calc(var(--left) - 0.5rem);
        }
        20%,
        50% {
          top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
          left: calc(var(--left) - 1.5rem);
        }
        30%,
        60% {
          top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
          left: calc(var(--left) + 0.5rem);
        }
        40%,
        80% {
          top: min(var(--top), calc(80vh - 1rem));
          left: calc(var(--left) - 2.5rem);
        }
        35%,
        95% {
          top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem));
          left: calc(var(--left) - 3rem);
        }
        50%,
        90% {
          top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
          left: calc(var(--left) + 0.5rem);
        }
        100% {
          top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
          left: calc(var(--left) + 1.5rem);
        }
      }
      .bee:nth-child(4n) {
        animation: flying2;
        animation-duration: 12s;
        animation-iteration-count: infinite;
      }
      @keyframes flying2 {
        0% {
          top: 9rem;
          left: calc(50vw - 0.4rem);
          opacity: 0;
        }
        5% {
          opacity: 1;
        }
        20%,
        90% {
          top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
          left: calc(var(--left) + 5rem);
        }
        15%,
        75% {
          top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
          left: calc(var(--left) - 6rem);
        }
        30%,
        80% {
          top: min(calc(var(--top) + 4rem), calc(80vh - 1rem));
          left: calc(var(--left) - 1.5rem);
        }
        25%,
        65% {
          top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
          left: calc(var(--left) + 5rem);
        }
        90%,
        80% {
          top: min(calc(var(--top) + 4rem), calc(80vh - 1rem));
          left: calc(var(--left) - 3.5rem);
        }
        35%,
        95% {
          top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem));
          left: calc(var(--left) - 3rem);
        }
        50%,
        40% {
          top: min(calc(var(--top) - 5rem), calc(80vh - 1rem));
          left: calc(var(--left) + 0.5rem);
        }
        100% {
          top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
          left: calc(var(--left) + 1.5rem);
        }
      }
      .bee:nth-child(4n + 1) {
        animation: flying3;
        animation-duration: 20s;
        animation-iteration-count: infinite;
      }
      @keyframes flying3 {
        0% {
          top: 9rem;
          left: calc(50vw - 0.4rem);
          opacity: 0;
        }
        5% {
          opacity: 1;
        }
        15%,
        90% {
          top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
          left: calc(var(--left) + 5rem);
        }
        15%,
        75% {
          top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
          left: calc(var(--left) - 8rem);
        }
        30%,
        80% {
          top: min(calc(var(--top) + 2rem), calc(80vh - 1rem));
          left: calc(var(--left) + 5rem);
        }
        25%,
        65% {
          top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
          left: calc(var(--left) + 8rem);
        }
        35%,
        80% {
          top: min(calc(var(--top) + 8rem), calc(80vh - 1rem));
          left: calc(var(--left) - 8rem);
        }
        50%,
        95% {
          top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
          left: calc(var(--left) - 3rem);
        }
        90%,
        40% {
          top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
          left: calc(var(--left) + 5rem);
        }
        100% {
          top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
          left: calc(var(--left) - 8rem);
        }
      }
      .bee:nth-child(4n + 2) {
        animation: flying4;
        animation-duration: 15s;
        animation-iteration-count: infinite;
      }
      @keyframes flying4 {
        0% {
          top: 9rem;
          left: calc(50vw - 0.4rem);
          opacity: 0;
        }
        5% {
          opacity: 1;
        }
        15%,
        90% {
          top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
          left: calc(var(--left) + 2rem);
        }
        15%,
        75% {
          top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
          left: calc(var(--left) + 4rem);
        }
        30%,
        80% {
          top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
          left: calc(var(--left) - 2rem);
        }
        25%,
        65% {
          top: min(calc(var(--top) + 2rem), calc(80vh - 1rem));
          left: calc(var(--left) - 6rem);
        }
        35%,
        80% {
          top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
          left: calc(var(--left) + 6rem);
        }
        50%,
        95% {
          top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
          left: calc(var(--left) - 3rem);
        }
        90%,
        40% {
          top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
          left: calc(var(--left) + 1rem);
        }
        100% {
          top: min(calc(var(--top) + 3rem), calc(80vh - 1rem));
          left: calc(var(--left) - 4rem);
        }
      }

      .cursor {
        position: absolute;
        top: calc(var(--top, 11rem) - 2rem);
        left: calc(var(--left, 50vw) - 2rem);
        transform: rotate(-20deg);
        pointer-events: none;
      }
      .cursor path {
        fill: #12486b;
      }
      .cursor--red polygon {
        animation: hurting-hand;
        animation-duration: 30s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
      }
      @keyframes hurting-hand {
        33% {
          fill: #ff7d66;
        }
        100% {
          fill: #419197;
        }
      }

      .water {
        position: absolute;
        top: 80vh;
        left: 0;
        width: 100%;
        height: 20vh;
        background: linear-gradient(#78d6c6, #12486b);
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div id="hive-line" class="hive-line"></div>
    <div class="hive-text">别点！</div>
    <div id="hive" class="hive">
      <div class="hive__division"></div>
      <div class="hive__division"></div>
      <div class="hive__division"></div>
      <div class="hive__division"></div>
      <div class="hive__division"></div>
      <div class="hive__door"></div>
    </div>
    <div id="cursor" class="cursor">
      <svg
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        baseProfile="tiny"
        id="svg3010"
        x="0"
        y="0"
        width="4rem"
        height="4rem"
        viewBox="100 0 600 450"
        overflow="visible"
        xml:space="preserve"
      >
        <polygon
          fill="#FFFFFF"
          points="296,210 291,237 312,258 376,386 504,391 520,354.1 536,306 541,199 520,178 488,162 440,146   408,141 392,66 360,66 355,237 323,205 "
        />

        <path
          d="M344,66h16v176h-16v-16h-16v-16h16V66z M536,194v112h16V194H536z M280,194v48h16v-32h32v-16H280z M328,290v-32h-16v32H328z   M344,322v-32h-16v32H344z M360,354v48h160v-47.9h-16V386H376l0,0v-32H360l0-32h-16v32H360z M520,354h16v-48h-16V354z M312,258v-16  h-16v16H312z M520,178v16h16v-16H520z M488,162v64h16v-48h16v-16H488z M440,146v64h16v-48h32v-16H440z M408,130V66h-16v144h16v-64  h32v-16H408z M360,50v16h32V50H360z"
        />
      </svg>
    </div>
    <div id="bee-wrapper" class="bee_wrapper"></div>
    <div id="water" class="water"></div>
    <script>
      const hive = document.getElementById('hive');
      const hiveLine = document.getElementById('hive-line');
      const cursor = document.getElementById('cursor');
      const beeWrapper = document.getElementById('bee-wrapper');
      const water = document.getElementById('water');

      let provoked = false;
      const beeNumber = 30;

      hive.addEventListener('click', () => {
        hive.classList.add('hive--provoked');
        hiveLine.classList.add('hive-line--provoked');
        cursor.classList.add('cursor--red');
        provoked = true;
        let beeCount = 0;

        const intervalID = setInterval(() => {
          if (beeCount >= beeNumber) {
            clearInterval(intervalID);
          }
          const bee = document.createElement('div');
          bee.classList.add('bee');
          beeWrapper.appendChild(bee);
          beeCount = beeCount + 1;
        }, 300);
      });

      const cursorFunction = (mouse) => {
        const clientX = mouse.clientX
          ? mouse.clientX
          : mouse.touches[0].clientX;
        const clientY = mouse.clientY
          ? mouse.clientY
          : mouse.touches[0].clientY;
        document.body.style = `--top: ${clientY}px; --left: ${clientX}px;`;
      };

      window.addEventListener('mousemove', cursorFunction);
      window.addEventListener('touchstart', cursorFunction);

      water.addEventListener('mouseover', () => {
        cursor.classList.remove('cursor--red');
      });

      water.addEventListener('mouseout', () => {
        if (provoked) {
          cursor.classList.add('cursor--red');
        }
      });
    </script>
  </body>
</html>
